<template>
  <div @click.stop="()=>{}">
    <span @click.stop="onOpen">
      <slot></slot>
    </span>
    <el-dialog
      :close-on-click-modal="false"
      title="备注"
      class="dialog"
      :modal="false"
      :show-close="false"
      :visible.sync="visible"
      width="300px"
      :style="style"
    >
      <div>
        <el-input @input="onInput" placeholder="请输入" v-model="val" resize="none" type="textarea" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="btn" @click="onClose">取 消</el-button>
        <el-button class="btn" type="primary" @click="internalOk">发送</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script lang="ts">
/**
 * 纠错弹窗组件
 */
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component({
  name: 'RemarkModal'
})
export default class RemarkModal extends Vue {
  @Prop() private onOK: any;
  private visible: boolean = false;
  private val: any = undefined;
  private style: object = { left: 0, top: 0 }

  private onOpen (e: any) {
    this.setStyle(e)
    this.visible = true
  }

  private setStyle (e: any) {
    const { left, top } = e.target.getBoundingClientRect()
    this.style = {
      left: `${left + 20}px`,
      top: `${top - 100}px !important`
    }
  }

  private onClose () {
    this.visible = false
  }

  private internalOk () {
    if (this.onOK) {
      this.onOK(this.val)
      this.onClose()
    }
  }

  private onInput () {
    this.$forceUpdate()
  }

  private created () {
    this.val = undefined
  }
}
</script>

<style lang="stylus" scoped>
.dialog
  position fixed
  width 300px
  height 163px !important
  overflow hidden
  border-radius 6px
  box-shadow 0px 4px 29px 0px rgba(155, 165, 172, 0.46)
  >>> .el-dialog
        margin-top 0px !important
        height 163px
  >>> .el-dialog__header
        padding 9px 16px 5px 16px
  >>> .el-dialog__body
        padding 0 16px 12px 16px
  >>> .el-dialog__title
        font-size 12px
        font-weight 500
        color #303753
  >>> .el-dialog__footer
        padding 0 16px 16px 16px
  >>> .el-textarea
        textarea
          width 268px
          height 64px
          border-radius 4px
.btn
  width 50px
  height 32px
  display inline-flex
  justify-content center
  align-items center
</style>
